<template>
  <div class="code-demo-mobile">
    <div class="u-case" ref="demoRef" v-if="$slots.default">
      <slot></slot>
    </div>
    <div class="u-source-wrap hljs">
      <div class="u-source" v-html="codeStr"></div>
      <div class="u-source" v-if="scriptCodeStr" v-html="scriptCodeStr"></div>
    </div>
  </div>
</template>

<script setup name="CodeDemoMobile">
import { computed, ref } from 'vue'
import hljs from 'highlight.js'
import 'highlight.js/styles/base16/edge-light.css'
const props = defineProps({
  code: String,
  scriptCode: String,
})

const demoRef = ref()

const codeStr = computed(() => {
  return hljs.highlight(props.code || '', { language: 'html' }).value
})
const scriptCodeStr = computed(() => {
  return hljs.highlight(props.scriptCode || '', { language: 'javascript' })
    .value
})

defineExpose({
  demoRef,
})
</script>

<style lang="stylus" scoped>
.code-demo-mobile
  display flex
  height 200px
  border 1px solid var(--el-border-color)
  border-radius var(--el-border-radius-base)
  .u-case
    padding 4px
    width 375px
    background #e2edeb
    border-right 1px solid var(--el-border-color)
    overflow auto
  .u-source-wrap
    flex 1
    overflow auto
  .u-source
    padding 10px
    white-space pre
    font-family: Consolas, Monaco, monospace;
    font-size: 10px;
</style>
